<template>
  <div>
    <el-drawer title="单据详情" :visible.sync="detailvisible" size="70%" @opened="handleOpen" :with-header="false"  :before-close="handleClose">
      <div>
        <div style=" margin-top: 30px;margin-left: 20px;">
          <span class="titleClass" v-if="this.invData.einvNr == '' || this.invData.einvNr == null">发票代码：{{
            this.invData.invCode }}&emsp;发票号码：{{ this.invData.invNr }}
            匹配单据</span>
          <span class="titleClass" v-else>数电发票号码：{{ this.invData.einvNr }} 匹配单据</span>
          <br />
          <el-button type="primary" @click="showInfo()" size="mini" style="margin-top: 30px;"> 发票详情
          </el-button>
          <el-table :header-cell-style="{ background: '#F0F1F3', }" :data="docTableData" ref="singleTable"
            highlight-current-row header-align="center" align="center" border style="width: 99%;"
            @row-dblclick="showDocInfo">
            <el-table-column label="单据类型" prop="documentType" show-overflow-tooltip />
            <el-table-column label="单据号" prop="documentNr" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button type="text" size="small" title="点击可复制" icon="el-icon-document-copy"
                  @click="handleCopyLink(scope.row.documentNr)"></el-button>
                <span style="color:#65B9FD; cursor: pointer;" @click="showDocInfo(scope.row)"> {{ scope.row.documentNr }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="单据时间" prop="documentDate" show-overflow-tooltip />
            <el-table-column label="供应商名称" prop="supplierName" show-overflow-tooltip />
            <el-table-column label="国别" prop="country" show-overflow-tooltip />
            <el-table-column label="GRN" prop="grn" show-overflow-tooltip />
            <el-table-column label="币种" prop="currency" show-overflow-tooltip />
            <el-table-column label="未税金额（原币）" prop="originalCurrencyAmount" show-overflow-tooltip />
            <el-table-column label="税金（原币）" prop="originalCurrencyTax" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
    </el-drawer>
    <el-drawer title="单据详情" :visible.sync="docDetailvisible" size="70%" @opened="handleOpen" :with-header="false"
      :before-close="cancel">
      <div>
        <div style=" margin-top: 20px;margin-left: 20px;">
          <span class="titleClass">单据类型：{{
            this.detailData.documentType }}&emsp;单据号：{{ this.detailData.documentNr }}
            详情</span>
          <el-form label-width="120px" class="form">
            <div style="padding: 50px 0px 0px 25px; font-size: 16px">
              <el-row>
                <el-col :span="8"><span>单据类型：</span>{{ detailData.documentType }}</el-col>
                <el-col :span="8"><span>单据号：</span>{{ detailData.documentNr }}</el-col>
                <el-col :span="8"><span>单据时间：</span>{{ detailData.documentDate }}</el-col>

              </el-row>
              <el-row style="margin: 36px 0px">
                <el-col :span="8"><span>国别：</span>{{ detailData.country }}</el-col>
                <el-col :span="8"><span>供应商代码：</span>{{ detailData.supplierCode }} </el-col>
                <el-col :span="8"><span>供应商名称：</span>{{ detailData.supplierName }}</el-col>
              </el-row>
              <el-row style="margin: 36px 0px">
                <el-col :span="8"><span>BG：</span>{{ detailData.bg }}</el-col>
                <el-col :span="8"><span>DN/CN：</span>{{ detailData.dnCn }}</el-col>
                <el-col :span="8"><span>GRN：</span>{{ detailData.grn }}</el-col>
              </el-row>
              <el-row style="margin: 36px 0px">
                <el-col :span="8"><span>币种：</span>{{ detailData.currency }}</el-col>
                <el-col :span="8"><span>汇率：</span>{{ detailData.exchangeRate }}</el-col>
                <el-col :span="8"><span>税率：</span>{{ detailData.taxRate }}</el-col>

              </el-row>
              <el-row style="margin: 36px 0px">
                <el-col :span="8"><span>未税金额（本币）：</span>{{ detailData.localCurrencyAmount
                }}</el-col>
                <el-col :span="8"><span>未税金额（原币）：</span><span>{{ detailData.originalCurrencyAmount
                }}</span></el-col>
                <el-col :span="8"><span>验证状态：</span>{{ detailData.validationStatus }}</el-col>
              </el-row>
              <el-row style="margin: 36px 0px">
                <el-col :span="8"><span>税金（原币）：</span>{{ detailData.originalCurrencyTax }}</el-col>
                <el-col :span="8"><span>税金（本币）：</span>{{ detailData.localCurrencyTax }}</el-col>
                <el-col :span="8"><span>请求号：</span>{{ detailData.requestNr }}</el-col>
              </el-row>
              <el-row style="margin: 36px 0px">
                <el-col :span="8"><span>操作时间：</span>{{ detailData.operationTime }}</el-col>
                <el-col :span="8"><span>操作人：</span>{{ detailData.operator }}</el-col>
              </el-row>
            </div>
          </el-form>
          <div style="position: absolute; right: 8%; bottom: 42%; z-index: 999">
            <el-button type="primary" @click="cancel" size="small">关 闭</el-button>
          </div>
        </div>

      </div>
    </el-drawer>
    <toll-dialog ref="tollDialog"></toll-dialog>
    <Einvoice-dialog ref="einvoiceDialog"></Einvoice-dialog>
    <detail-dialog ref="detailDialog"></detail-dialog>
    <car-dialog ref="carDialog"></car-dialog>
  </div>
</template>

<script>
import tollInvDetaildialog from '@/components/invoiceStyle/tollInvDetaildialog.vue';
import allECInvDetaildialog from '@/components/invoiceStyle/allECInvDetaildialog.vue';
import detaildialog from '@/components/invoiceStyle/detaildialog.vue';
import carDetaildialog from '@/components/invoiceStyle/carDetaildialog.vue';
import { convertCurrency } from "@/libs/tools.js";
import { getInvInfo, getDocById, getOtherDocument } from '../js/zsdz.js'
export default {
  components: {
    'toll-dialog': tollInvDetaildialog,
    'Einvoice-dialog': allECInvDetaildialog,
    'detail-dialog': detaildialog,
    'car-dialog': carDetaildialog,
  },
  data() {
    return {
      detailvisible: false,
      docDetailvisible: false,
      detailData: {},

      docTableData: [],

      invData: {},
    }
  },
  methods: {
    handleOpen() {
      this.getDocument()
    },
    getDocument() {
      let param = {}
      param.invId = this.invData.invId
      getOtherDocument(param).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.docTableData = res.data
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      }).catch((e) => {
        this.$message({
          message: e,
          type: 'warning',
        })
      })
    },
    //
    showDocInfo(row) {
      // let docId = '430993020522004480'
      getDocById(row.documentId).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.detailData = res.data
          this.docDetailvisible = true
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      }).catch((e) => {
        this.$message({
          message: e,
          type: 'warning',
        })
      })

    },
    //发票详情
    showInfo() {
      var row = this.invData
      var param = {}
      param.invcode = row.invCode
      param.invnr = row.invNr
      param.eInvnr = row.einvNr
      getInvInfo(param).then((res) => {
        if (res.code == 0) {
          row = res.data
          if (row.invkind == '14') {
            this.$refs.tollDialog.invoiceForm.invcode = row.invcode
            this.$refs.tollDialog.invoiceForm.invnr = row.invnr
            this.$refs.tollDialog.invoiceForm.invdate = row.invdate
            this.$refs.tollDialog.invoiceForm.custname = row.custname
            this.$refs.tollDialog.invoiceForm.custtaxnr = row.custtaxnr
            this.$refs.tollDialog.invoiceForm.sellername = row.sellername
            this.$refs.tollDialog.invoiceForm.sellertaxnr = row.sellertaxnr
            this.$refs.tollDialog.invoiceForm.totalamount = row.totalamount
            if (row.totalamount.toString().indexOf("-") != -1) {
              this.$refs.tollDialog.invoiceForm.totalamountDX = "(负数)" + convertCurrency(row.totalamount.substring(1))
            } else {
              this.$refs.tollDialog.invoiceForm.totalamountDX = convertCurrency(row.totalamount)
            }
            this.$refs.tollDialog.invoiceForm.detailsList = row.list
            this.$refs.tollDialog.detailDialogVisible = true
          } else if (row.invkind == '81' || row.invkind == '82') {
            this.$refs.einvoiceDialog.invoiceForm.invnr = row.einvnr
            this.$refs.einvoiceDialog.invoiceForm.invdate = row.invdate
            this.$refs.einvoiceDialog.invoiceForm.custname = row.custname
            this.$refs.einvoiceDialog.invoiceForm.custtaxnr = row.custtaxnr
            this.$refs.einvoiceDialog.invoiceForm.sellername = row.sellername
            this.$refs.einvoiceDialog.invoiceForm.sellertaxnr = row.sellertaxnr
            this.$refs.einvoiceDialog.invoiceForm.totalamount = row.totalamount
            this.$refs.einvoiceDialog.invoiceForm.memo = row.memo
            if (row.totalamount.toString().indexOf("-") != -1) {
              this.$refs.einvoiceDialog.invoiceForm.totalamountDX = "(负数)" + convertCurrency(row.totalamount.substring(1))
            } else {
              this.$refs.einvoiceDialog.invoiceForm.totalamountDX = convertCurrency(row.totalamount)
            }
            this.$refs.einvoiceDialog.invoiceForm.detailsList = row.list
            if (row.invkind == '62' || row.invkind == '81') {
              this.$refs.einvoiceDialog.invoiceTitle = "电子发票（增值税专用发票）"
            } else {
              this.$refs.einvoiceDialog.invoiceTitle = "电子发票（普通发票）"
            }
            this.$refs.einvoiceDialog.detailDialogVisible = true
          } else if (row.invkind == '41') {
            this.$refs.carDialog.invoiceTitle = "机动车销售统一发票"
            this.$refs.carDialog.invoiceForm.invdate = moment(row.invdate).format('YYYY-MM-DD')
            this.$refs.carDialog.invoiceForm.invcode = row.invcode
            this.$refs.carDialog.invoiceForm.invnr = row.invnr
            this.$refs.carDialog.invoiceForm.certificate = row.invoiceCar.certificate
            this.$refs.carDialog.invoiceForm.certificateimport = row.invoiceCar.certificateimport
            this.$refs.carDialog.invoiceForm.idNo = row.invoiceCar.custidnr
            this.$refs.carDialog.invoiceForm.custname = row.invoiceCar.custname
            this.$refs.carDialog.invoiceForm.custtaxnr = row.invoiceCar.custtaxnr
            this.$refs.carDialog.invoiceForm.issuer = row.invoiceCar.drawer
            this.$refs.carDialog.invoiceForm.enginenr = row.invoiceCar.enginenr
            this.$refs.carDialog.invoiceForm.factorymodel = row.invoiceCar.factorymodel
            this.$refs.carDialog.invoiceForm.inspectionnr = row.invoiceCar.inspectionnr
            this.$refs.carDialog.invoiceForm.invamount = row.invoiceCar.invamount
            this.$refs.carDialog.invoiceForm.limitpeople = row.invoiceCar.limitpeople
            this.$refs.carDialog.invoiceForm.machineno = row.invoiceCar.machineno
            this.$refs.carDialog.invoiceForm.productplace = row.invoiceCar.productplace
            this.$refs.carDialog.invoiceForm.salerAddress = row.invoiceCar.salerAddress
            this.$refs.carDialog.invoiceForm.salerBankAccount = row.invoiceCar.salerBankAccount
            this.$refs.carDialog.invoiceForm.salerBankName = row.invoiceCar.salerBankName
            this.$refs.carDialog.invoiceForm.salerPhone = row.invoiceCar.salerPhone
            this.$refs.carDialog.invoiceForm.sallername = row.invoiceCar.sallername
            this.$refs.carDialog.invoiceForm.sallertaxnr = row.invoiceCar.sallertaxnr
            this.$refs.carDialog.invoiceForm.taxamount = row.invoiceCar.taxamount
            this.$refs.carDialog.invoiceForm.taxrate = row.invoiceCar.taxrate
            this.$refs.carDialog.invoiceForm.taxbureaucode = row.invoiceCar.taxbureaucode
            this.$refs.carDialog.invoiceForm.taxbureauname = row.invoiceCar.taxbureauname
            this.$refs.carDialog.invoiceForm.taxrecords = row.invoiceCar.taxrecords
            this.$refs.carDialog.invoiceForm.tonnage = row.invoiceCar.tonnage
            this.$refs.carDialog.invoiceForm.totalamount = row.invoiceCar.totalamount
            this.$refs.carDialog.invoiceForm.totalamountDX = convertCurrency(row.invoiceCar.totalamount)
            this.$refs.carDialog.invoiceForm.vehiclenr = row.invoiceCar.vehiclenr
            this.$refs.carDialog.invoiceForm.vehicletype = row.invoiceCar.vehicletype
            this.$refs.carDialog.detailDialogVisible = true
          } else {
            if (row.invkind == '04') {
              this.$refs.detailDialog.invoiceTitle = '增值税普通发票'
            } else if (row.invkind == '01') {
              this.$refs.detailDialog.invoiceTitle = '增值税专用发票'
            } else if (row.invkind == '10') {
              this.$refs.detailDialog.invoiceTitle = '增值税电子普通发票'
            } else if (row.invkind == '08') {
              this.$refs.detailDialog.invoiceTitle = '增值税电子专用发票'
            }
            this.$refs.detailDialog.invoiceForm.invcode = row.invcode
            this.$refs.detailDialog.invoiceForm.invnr = row.invnr
            this.$refs.detailDialog.invoiceForm.invdate = row.invdate
            this.$refs.detailDialog.invoiceForm.custname = row.custname
            this.$refs.detailDialog.invoiceForm.custtaxnr = row.custtaxnr
            this.$refs.detailDialog.invoiceForm.custaddrtel = row.custaddrtel
            this.$refs.detailDialog.invoiceForm.custbankacct = row.custbankacct
            this.$refs.detailDialog.invoiceForm.selleraddresstel = row.selleraddresstel
            this.$refs.detailDialog.invoiceForm.sellerbankacct = row.sellerbankacct
            this.$refs.detailDialog.invoiceForm.sellername = row.sellername
            this.$refs.detailDialog.invoiceForm.sellertaxnr = row.sellertaxnr
            this.$refs.detailDialog.invoiceForm.totalamount = row.totalamount
            this.$refs.detailDialog.invoiceForm.memo = row.memo
            this.$refs.detailDialog.invoiceForm.payee = row.payee
            this.$refs.detailDialog.invoiceForm.checker = row.checker
            this.$refs.detailDialog.invoiceForm.issuer = row.issuer
            if (row.totalamount.toString().indexOf("-") != -1) {
              this.$refs.detailDialog.invoiceForm.totalamountDX = "(负数)" + convertCurrency(row.totalamount.substring(1))
            } else {
              this.$refs.detailDialog.invoiceForm.totalamountDX = convertCurrency(row.totalamount)
            }
            this.$refs.detailDialog.invoiceForm.detailsList = row.list
            this.$refs.detailDialog.detailDialogVisible = true
          }
        } else if (res.code != 0) {
          this.$message({
            message: res.message,
            type: 'warning',
          })
        }
      })
    },
    // 关闭查看明细
    cancel() {
      this.detailData = {}
      this.docDetailvisible = false
    },
    handleClose(){
      this.invData={}
      this.docTableData=[]
      this.detailvisible = false
    },


    handleCopyLink(val) {
      let _this = this
      this.$copyText(val).then(
        function (e) {
          _this.$message({
            showClose: true,
            message: '复制成功',
            type: 'success',
          })
        },
        function (e) {
          _this.$message({
            showClose: true,
            message: '复制失败，请手动复制',
            type: 'error',
          })
        }
      )
    },



  },
}
</script>
<style>
.titleClass {
  font-size: 18px;
  color: #333;
  font-weight: 500;
  padding-left: 5px;
  border-left: 3px solid #0077ff;

  line-height: 14px;
}

.divider-wrapper /deep/.el-drawer {
  width: 92% !important;
}

.el-drawer__header {
  margin-bottom: 0px !important;
}
</style>